<template>
    <modal 
        class='component-pay-box'
        :show='show'
        mode='bottom'
        :maskClose='false'
        @close='closeHandle'>
        <div class="component-pay" :class='{select:showCard}'>
            <div class='component-pay-detail'>
                <i class="component-pay__button iconfont icon-close-pure" @click='closeHandle'></i>
                <div class="component-pay-detail__header">{{title}}</div>
                <ul class="component-pay-detail__main">
                    <li class="component-pay-detail__item">
                        <p class="key">金额</p>
                        <div class="value">
                            <p class='fee'>{{amount | toYuan}}元</p>
                        </div>
                    </li>
                    <li class="component-pay-detail__item">
                        <p class="key">支付方式</p>
                        <div class='value' v-if='!loading_list'>
                            <p class='bank'>{{ info.bankName || placeholder }}</p>
                        </div>
                        <div class="component-pay__loading" v-show='loading_list'>
                            <loading mode='full' :size='15'></loading>
                        </div>
                    </li>
                    <!-- <li class="component-pay-detail__item">
                        <p class="key">手续费</p>
                        <div class="value">
                            <p class='money'>{{serviceFee | toYuan}}元</p>
                            <p class='tips' v-show='payType == 0'>支付金额大于500.00元免手续费</p>
                        </div>
                    </li> -->
                </ul>
                <div class="component-pay-detail__footer">
                    <span class="button long" @click='finish(),log("c_pay_confirm",amount)'>确认支付 {{ amount | toYuan }}元</span>
                </div>
            </div>
            <div class="component-pay__cards">
                <i class="component-pay__button iconfont icon-arrow" @click='showCard = false'></i>
                <div class="component-pay-detail__header">选择支付方式</div>
                <ul class="component-pay__list">
                    
                    <li class="component-pay__item" @click='setUseBalance' v-if='balance'>
                        <span><img src="../images/loading_1.png"></span>
                        <p>余额： {{ balance | toYuan }}元</p>
                        <i class='iconfont icon-check' v-if='useBalance'></i>
                    </li>
                    <li class="component-pay__item" v-for='(item,index) in list' @click='setDefaults(item)'>
                        <span><img :src="item.logoUrl"></span>
                        <p>{{item.bankName}}({{item.cardNo | bankCard }})</p>
                        <i class='iconfont icon-check' v-if='item.defaults == true'></i>
                    </li>
                    <li class="component-pay__item" @click='addCard'>
                        <span><img src="../images/bankcard.png"></span>
                        <p>添加银行卡</p>
                        <i class='iconfont icon-arrow add-card'></i>
                    </li>
                </ul>
            </div>
        </div>
    </modal>
</template>

<script>
    import { Promise } from 'es6-promise'
    import modal from './Modal.vue'
    import loading from './Loading.vue'
    import toYuan from '../filters/filter-toYuan'
    import bankCard from '../filters/filter-bankCard'
    import bindName from '../filters/filter-bindName'
    import  { mapGetters, mapActions }  from 'vuex'
    import { allApi, userApi, bankcardApi } from '../api/api'

    export default {
        name:'payDetail',
        components:{
            modal,
            loading
        },
        filters:{
            toYuan,
            bankCard,
            bindName
        },
        props: {
            show: {
                type: Boolean,
                default:false
            },
            amount:{
                type: [Number,String],
                default:''
            },
            type: {
                type: String,
                default:''
            },
            fee: {
                type: String,
                default:''
            },
            title: {
                type: String,
                default:'支付详情'
            },
        },
        data() {
            return {
                placeholder:'--',
                useBalance:false,
                payType:0,
                balance:0,
                curIndex:-1,
                loading_list:true,
                showCard:false,
                info:{},
                list:[]
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            userInfo(){
                return this.localInfo.userInfo
            },
            defaultCard(){
                let card = {}
                if(this.list.length){
                    _.each(this.list,(value,index)=>{
                        if(value.defaults == true){
                            card = value
                            return false
                        }
                    })
                }
                return card
            },
            serviceFee(){
                return 0

                if(this.fee){
                    return this.fee
                }
            },
            totalAmount(){
                return this.amount
                // return this.serviceFee + this.amount
            },
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip',
                'setUserInfo'
            ]),


            log(eventName,eventLabel){
                let eventParams = {}
                if(eventLabel){
                    eventParams = {
                        e_n:eventName,
                        e_v:{
                            value:eventLabel
                        }
                    }
                }
                else{
                    eventParams = {
                        e_n:eventName
                    }
                }
                allApi.log(eventParams)
            },
            closeHandle(){
                this.$emit('close')
            },
            changePayType(){
                this.showCard = true
                return
            },
            goRouter(name){
                this.$router.push({
                    name:name
                })
            },
            addCard(){
                // console.log(this.$route) 
                // return
                this.$router.push({
                    name:'add-bankcard'
                })
            },
            closePassword(){
                this.$emit('close')
            },
            finish(){
                let payObject = {
                    totalAmount:this.totalAmount,
                    cardId:this.info.id
                }
                this.$emit('finish',payObject)
            },
            getInfo(){
                return userApi.mine()
                .then(result=>{
                    this.info = result.cardInfo
                    this.loading_list = false
                })
            },
        },
        created(){
            this.getInfo()
            .then(result=> {
                this.loading_list = false
            })
            .catch(error=> {
                console.error(error)
                this.loading_list = false
            })
        }
    }
</script>

<style lang="scss">
    @import "../sass/_variables";
    @import "../sass/_extends";
    @import "../sass/_mixins";
    
    .component-pay-box{
        .component-modal__main{
            padding: 0;
        }
    }
    .component-pay{
        position: relative;
        height: 260px;
        overflow:hidden;
        &.select{
            .component-pay-detail{
                transform:translate3d(-100%,0,0);
            }
            .component-pay__cards{
                transform:translate3d(0,0,0);
            }
        }
    }
    .component-pay-detail{
        transition:transform ease 200ms;
        position: absolute;
        padding: 14px 24px 24px 24px;
        top:0;
        left:0;
        right:0;
        bottom:0;
        transform:translate3d(0,0,0);
    }
    .component-pay__button{
        z-index:2;
        cursor:pointer;
        position: absolute;
        left: 14px;
        top: 19px;
        font-size: 24px;
        width: 24px;
        text-align: center;
        height: 24px;
        line-height: 24px;
        transition:color ease .3s;
        &:hover{
            color:#000;
        }
    }
    .component-pay__cards{
        transition:transform ease 200ms;
        position: absolute;
        padding: 14px 24px 24px 24px;
        top:0;
        left:0;
        right:0;
        bottom:0;
        transform:translate3d(100%,0,0);
        .icon-arrow{
            transform:rotate(180deg)
        }
    }
    .component-pay-detail__header{
        @extend %font-title;
        padding-bottom: 16px;
        text-align: center;
    }
    .component-pay-detail__item{
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        .key{
            @extend %font-subhead;
            color:$importColor;
        }
        .value{
            @extend %font-title;
            text-align: right;
            .fee{
                color:$orange;
            }
            .bank{
                @extend %font-subhead;
            }
            .people{
                @extend %font-caption;
            }
            .switch{
                @extend %font-caption;
                color:$orange;
            }
            .money{
                @extend %font-subhead;
                color:$orange;
            }
            .tips{
                @extend %font-caption;
            }
        }
    }
    .component-pay-detail__footer{
        display: block;
        width: 100%;
        left: 0;
        padding: 14px;
        box-sizing: border-box;
        position: absolute;
        bottom:0;
        .button{
            margin: 0;
        }
    }
    .component-pay__loading{
        position: relative;
        height: 64px;
        width: 40px;
    }
    .component-pay__item{
        height:56px;
        display: flex;
        align-items: center;
        position: relative;
        &:after{
            content:'';
            position: absolute;
            left:0;
            bottom:0;
            right:-16px;
        }
        &:active{
            p{color:$orange};
        }
        span{
            display: block;
            width: 24px;
            height: 24px;
            padding-right: 16px;
            img{
                width: 100%;
            }
        }
        p{
            flex:1;
            @extend %font-body1;
            color:$importColor;
        }
        .iconfont{
            font-size: 18px;
            width: 18px;
            height: 18px;
            line-height:18px;
            transform:rotate(0);
        }
        .icon-check{
            color:$orange;
        }
    }

</style>
